﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: #fff">
        <div template="top_bar" style="display:none" instance="$root.$topAppBar">
            <table cellpadding="0" cellspacing="0" style="min-height:120px;max-height:120px">
                <tr>
                    <td style="padding: 10px" ng-repeat="x in $root.$application_menu" valign="middle">
                        <img src="/Assets/Icons/{{x.Icon}}" class="block-size-80" ng-click="showDetail(x);" />
                    </td>
                </tr>
            </table>

        </div>
        <div template="header_session" instance="$root.$session_header" style ="position: fixed; left: 0px; top: 0px; right: 0px;display:none" on-back="doBack();" >

        </div>
        
        <div template="header" style="position: fixed; left: 0px; top: 0px; right: 0px;display:block"  instance="$root.$header">

        </div>
        <progress class="indeterminate" style="width:100%;display:none;background-color:#fff"></progress>
        <div style="width:120px" id="mainLeft">

        </div>
        <div id="mainView" style="position:fixed;top:120px;left:120px;bottom:0px;right:0px"
             template="view"
             instance="$root.$appView"
             path="Views/hubPage.html" on-goto-root="ShowRoot();" effect="true">

        </div>
    </div>
    <script>
    var scope = this;
    scope.$$$ready(function () {
        scope.$find("#mainLeft").css("top", "120px");
        scope.$find("#mainLeft").css("height", $(window).height());

    });
    scope.doBack = function () {
        scope.$root.$appView.$back();
        scope.$root.$session_header.$setCaption(scope.$root.$appView.$currentScope.$$$caption);
    };
    scope.ShowRoot = function () {
        scope.$root.$header.$show();
        scope.$root.$session_header.$hide();
    };
    scope.showDetail = function (item) {
        window.top.$navigator.module = item;
        window.top.$navigator.form = undefined;
        
        var caption = scope.$$$res("AppMenu." + item.Caption, item.Caption, "ModuleName", "hubpage/hubpage.html");

        scope.$root.$appView.loadView("hubPageDetail.html", function (subScope) {
            if (!subScope.$$$caption) {
                subScope.$$$caption = subScope.$$$res("AppMenu." + item.Caption, item.Caption, "ModuleName", "hubpage/hubpage.html");

            }
            subScope.$root.$header.$hide();
            subScope.$root.$session_header.$show();
            subScope.$root.$session_header.$setCaption(subScope.$$$caption);
        });
    }

    
    </script>
</body>
</html>